import { Authenticator, ThemeProvider } from '@aws-amplify/ui-react';
import { AuthStyle } from './AuthStyle';

import { Example } from '@/components/Example';
import { InlineFilter } from '@/components/InlineFilter';

## Styling

You can customize the Authenticator's default style by using [CSS variables](../../theming/css-variables).

### CSS style

The example below uses a `<style>` tag to change the appearance of some of the components used for the Authenticator:

```css

[data-amplify-authenticator] {
  --amplify-components-authenticator-router-box-shadow: 0 0 16px var(--amplify-colors-overlay-10);
  --amplify-components-authenticator-router-border-width: 0;
  --amplify-components-authenticator-form-padding: var(--amplify-space-medium) var(--amplify-space-xl) var(--amplify-space-xl);
  --amplify-components-button-primary-background-color: var(--amplify-colors-neutral-100);
  --amplify-components-fieldcontrol-focus-box-shadow: 0 0 0 2px var(--amplify-colors-purple-60);
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-neutral-100);
  --amplify-components-tabs-item-color: var(--amplify-colors-neutral-80);
  --amplify-components-tabs-item-active-color: var(--amplify-colors-purple-100);
  --amplify-components-button-link-color: var(--amplify-colors-purple-80);
}

```

<Example>
<AuthStyle />

</Example>

<InlineFilter filters={['react']}>
### Theme Provider Theme

Below is an example of updating the style of the Authenticator by using the [ThemeProvider](/react/theming) [theme object](/react/theming#theme-object). To do this, you must surround the `Authenticator` in the `ThemeProvider`.

Then create a [theme object](/react/theming#theme-object), with all your font and color updates. Feel free to use [design tokens](/react/theming#design-tokens), as a way of designing your theme further.

```jsx file=./AuthStyle.tsx

```

<Example>
<AuthStyle />

</Example>

> If you have TypeScript enabled, all the object keys will be present when creating the [theme object](/react/theming#theme-object). This will help speed up your development time while creating themes.
</InlineFilter>

## Additional CSS Styling

You can also override the authenticator's `amplify-*` classes. For example, if you'd like to update the primary color of your submit button you can override the `amplify-button` class.

```css
.amplify-button--primary {
  background: linear-gradient(
    to right,
    var(--amplify-colors-green-80),
    var(--amplify-colors-orange-40)
  );
}
```

<Example>
  <style>{`.customization-button .amplify-button--primary { background: linear-gradient(to right, var(--amplify-colors-green-80), var(--amplify-colors-orange-40));}`}</style>
  <Authenticator className="customization-button" />
</Example>
